<template>
	<view class="order">
		<navbar :title="navbarTitle" />
		<view class="tabs flex justify-content_center sticky">
			<up-tabs :list="tabsList" :scrollable="false" :itemStyle="itemStyle" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" lineWidth="30" lineHeight="2" lineColor="#A72530" @change="changeTabs"></up-tabs>
		</view>
		<empty v-if="resultData.list.length === 0" />
		<view class="main">
			<view class="item border-box" v-for="item in resultData.list" :key="item.id">
				<view class="head flex align-item_center justify-content_space-between">
					<view>{{dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")}}</view>
					<view>
						{{item.status === 30 && item.commentStatus?"已完成":item.status === 40?"已取消":tabsList.find(tab => tab.status === item.status)?.name}}
					</view>
				</view>
				<view class="product flex align-item_center" v-for="spu in item.items" :key="spu.id">
					<image class="cover flex align-item_center justify-content_center" :src="spu.picUrl" mode="aspectFit">
					</image>
					<view class="info">
						<view class="name">{{spu.spuName}}</view>
						<view class="types border-box">{{spu.properties.map(pro=>pro.valueName).join(" ") || "取消订单"}}</view>
						<view class="points flex align-item_center justify-content_space-between">
							<view class="num">
								{{fen2yuan(spu.price)}}<text>{{params.type=== '0'?'金额':"积分"}}</text>
							</view>
							<view class="count">x{{spu.count}}</view>
						</view>
					</view>
				</view>
				<view class="countPoints">
					{{params.type=== '0'?'总金额':"总积分"}}：<text>{{fen2yuan(item.payPrice,(params.type=== '0'?2:0))}}</text>
				</view>
				<view class="operations flex align-item_center justify-content_flex-end">
					<view class="normal" v-if="item.status === 0" @click="cancelOrder(item)">取消订单</view>
					<view class="normal" v-if="(item.status === 20 || item.status === 30) && params.type=== '4'"
						@click="materialFlow(item)">查看物流</view>
					<view class="special" v-if="item.status === 0" @click="payOrder(item)">
						{{params.type=== '0'?'继续支付':"继续兑换"}}
					</view>
					<view class="special" v-if="item.status === 20" @click="receiveOrder(item)">
						{{params.type=== '0'?'确认完成':"确认收货"}}
					</view>
					<view class="special" v-if="item.status === 30 && !item.commentStatus" @click="evaluate(item)">待评价</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import {
		ref,
		reactive
	} from "vue";
	import {
		itemStyle,
		activeStyle,
		inactiveStyle
	} from "@/common/index.js"
	import navbar from "@/components/navbar.vue"
	import {
		navigateTo
	} from "@/utils/tool";
	import OrderApi from "@/sheep/api/trade/order.js"
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		fen2yuan,
	} from '@/sheep/hooks/useGoods.js';
	import dayjs from "dayjs"
	import sheep from '@/sheep';

	onReachBottom(() => {
		if (resultData.list.length >= resultData.total) return;
		params.pageNo++;
		orderPage()
	})

	const receiveOrder = (item) => {
		uni.showModal({
			title: '提示',
			content: '是否确认当前订单？',
			success: function(res) {
				if (res.confirm) {
					OrderApi.receiveOrder(item.id).then(res => {
						params.pageNo = 1;
						orderPage()
					})
				}
			}
		});
	}

	const payOrder = item => {
		uni.showModal({
			title: '提示',
			content: '确认要继续操作当前订单吗？',
			success: function(res) {
				if (res.confirm) {
					if (params.type === '0') {
						uni.setStorageSync("wechat", 1)
						sheep.$platform.pay('wechat', 'goods', item.payOrderId);
					} else {
						OrderApi.updatePaid({
							merchantOrderId: item.id
						}).then(res => {
							params.pageNo = 1
							navigateTo(`/user/pay_result/index?status=${res.data}&type=1`)
						})
					}
				}
			}
		});


	}

	const cancelOrder = (item) => {
		uni.showModal({
			title: '提示',
			content: '确认要取消当前订单吗？',
			success: function(res) {
				if (res.confirm) {
					OrderApi.cancelOrder(item.id).then(() => {
						params.pageNo = 1;
						orderPage()
					})
				}
			}
		});
	}

	const changeTabs = val => {
		params.status = val.status === -1 ? undefined : val.status
		params.commentStatus = val.status === 30 ? false : undefined
		params.pageNo = 1;
		orderPage()
	}

	const navbarTitle = ref("订单详情")
	const tabsList = reactive([{
			name: "全部",
			status: -1
		},
		{
			name: "待兑换",
			status: 0
		},
		{
			name: "待发货",
			status: 10
		}, {
			name: "待收货",
			status: 20
		}, {
			name: "待评价",
			status: 30
		}
	])


	const materialFlow = (item) => {
		navigateTo("/user/order_transport/index?id=" + item.id)
	}

	const evaluate = (item) => {
		navigateTo("/user/order_evaluate/index?id=" + item.id)
	}

	const resultData = reactive({
		list: [],
		total: 0
	})
	const params = reactive({
		pageNo: 1,
		pageSize: 10,
		type: undefined,
		status: undefined,
		commentStatus: undefined
	})
	const orderPage = () => {
		OrderApi.getOrderPage(params).then(res => {
			if (params.pageNo === 1) resultData.list = res.data.list;
			else resultData.list = resultData.list.concat(res.data.list);
			resultData.total = res.data.total;
		})
	}

	onShow(() => {
		orderPage()
	})

	onLoad((option) => {
		params.type = option.type
		if (params.type === '0') {
			tabsList[1].name = '待付款'
			tabsList[2].name = '待上门'
			tabsList[3].name = '待完成'
		}
	})
</script>


<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.main {
		padding-bottom: 120rpx;

		.item:not(:first-child) {
			margin: 20rpx auto 0 !important;
		}

		.item {
			margin: auto;
			padding: 20rpx 20rpx 40rpx;
			width: 710rpx;
			border-radius: 8rpx;
			background: #EFE5D0;

			.operations {
				margin-top: 32rpx;

				.special {
					color: #fff;
					background: #A72530;
					margin-left: 46rpx;
				}

				.normal {
					color: rgba(167, 37, 48, 1);
				}

				view {
					width: 172rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					border-radius: 100rpx;
					border: 2rpx solid #A72530;
					font-size: 28rpx;
					font-weight: 400;
				}
			}

			.countPoints {
				text-align: right;
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(64, 3, 3, 1);

				text {
					font-size: 40rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 57.92rpx;
					color: rgba(64, 3, 3, 1);
				}
			}

			.product {
				margin-top: 20rpx;

				.info {
					.points {
						margin-top: 14rpx;

						.count {
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(0, 0, 0, 1);
						}

						.num {
							font-size: 40rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 57.92rpx;
							color: rgba(167, 37, 48, 1);

							text {
								font-size: 24rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: 57.92rpx;
								color: rgba(64, 3, 3, 1);
							}
						}
					}

					.types {
						margin-top: 16rpx;
						min-width: 322rpx;
						width: fit-content;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 28rpx;
						opacity: 1;
						border-radius: 100rpx;
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						color: rgba(166, 123, 123, 1);
						background: #F8F3E7;
					}

					.name {
						width: 472rpx;
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(64, 3, 3, 1);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.cover {
					width: 160rpx;
					height: 160rpx;
					opacity: 1;
					border-radius: 8rpx;
					background: #FFFFFF;
					margin-right: 16rpx;

					image {
						width: 128rpx;
						height: 128rpx;
					}
				}
			}

			.head {
				view:last-child {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(167, 37, 48, 1);
					margin-right: 22rpx;
				}

				view:first-child {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(102, 102, 102, 1);
				}
			}
		}
	}

	:deep(.u-tabs) {
		width: 780rpx;

		.u-tabs__wrapper__nav__item {
			width: fit-content !important;
			padding: 0 !important;
		}
	}

	.tabs {
		padding: 20rpx 0;
		width: 100vw;
		overflow: hidden;
		top: var(--navbarH);
		background: #F8F3E7;
		z-index: 10;
	}
</style>